import React from 'react';
import './app.css'

// 函数组件
// 首字母大写 有返回值 
function Hello() {

  const clickHandler = (e) => {
    // 阻止跳转
    e.preventDefault();
    console.log('函数组件点击事件', e)
  }

  // 事件绑定 驼峰命名
  return (
    <div onClick={clickHandler}>
      hello
      <a href="http://baidu.com">百度</a>
    </div>
  )
}

// 类组件
// 需要继承自React.Component
class HelloComponent extends React.Component {

  // render函数必须有返回值 表示该组件的UI结构
  render() {
    // 在绑定事件中传递 event和额外参数
    return <div onClick={(e) => this.clickHandler(e, 'test msg')}>HelloComponent</div>
  }

  // 确保this指向
  clickHandler = (e, msg) => {
    console.log('类组件点击事件')
    console.log(e)
    console.log(msg)
  }
}

function App() {
  return (
    <div className="App">
      <Hello></Hello>
      <HelloComponent></HelloComponent>
    </div>
  );
}

export default App;
